<template>
  <div>
      <el-row>
          <el-col :span="24">
              <div class="size-tabs">
                  
         <el-button 
         :key="index"
            v-for="(stab,index) in selectTabs "
            @click="onClickTab( index)"
               type="text" :class="stab.className">  {{stab.tabname}} </el-button>
                
              </div>
          </el-col>
        <el-col :span="24">
            <div class="size-bg">
                <el-button
                 :key="index"                
                 v-for="(place,index) in placeSize "
                 @click="onClickSize(index)"
                  :class="place.style"
                  :style="{width:'90px'}"
                 size="mini"> {{place.size}}  </el-button>
                 
          <el-row v-if="showdiy">
            <el-col :span="12"> 
              <!-- 宽度输入框 -->
                <el-row >
                <el-col :span="6"> <span class="elspan">宽</span> </el-col>
                  <el-col :span="12">
                    <el-input v-model="placeWidth" placeholder="请输入宽度" 
                    size="mini"
                      @change="wInputChange"
                    :style="{width: '100%'}">
                    </el-input>
                  </el-col> 
                </el-row>
          <!-- 高度输入框 -->
                <el-row >
                  <el-col :span="6"> <span class="elspan">高</span> </el-col>
                  <el-col :span="12">
                    <el-input v-model="placeHeight" placeholder="请输入高度"  
                    size="mini"
                    @change="hInputChange"
                    :style="{width: '100%'}">
                    </el-input>               
                  </el-col><el-col :span="16"></el-col>
              </el-row>
            </el-col>
            <!-- 比例选择 -->
             <el-col :span="12">

                <el-select v-model="sizeUnit" size="mini"
                 :disabled="sizeUnitDisabled"
                   :style="{width: '40%'}">
                  <el-option v-for="(item, index) in sizeUnitOptions"
                   :key="index" :label="item.label"
                    :value="item.value"                    
                     ></el-option>
                </el-select>

             </el-col>
          </el-row>
       

             </div>
        </el-col>
      </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [ 'currtabs','defaulttabkey' ],
  data() {
    return {
        placeWidth:"",
        placeHeight:"",
        sizeUnit: 2, //计算获取
        sizeUnitDisabled: false,
        sizeUnitOptions : [
            {"label": "比例","value":1,"disabled": false},
            {"label": "像素","value":2,"disabled": false},
        ],
        showdiy: false, //显示diy 板块
        //currtype: this.currtabs,
         tabkey :  this.defaulttabkey, //默认选择显示第一个中情况
       // selectTabs: [],
      //  placeSize:[],
        place:{
            "110": [
                {size:'1000*90',style:'',dot:'*'},
                {size:'960*90',style:'',dot:'*'},
                {size:'960*60',style:'',dot:'*'},
                {size:'760*90',style:'',dot:'*'},
                {size:'728*90',style:'',dot:'*'},
                {size:'728*15',style:'',dot:'*'},
                {size:'640*90',style:'',dot:'*'},
                {size:'640*80',style:'',dot:'*'},
                {size:'640*60',style:'',dot:'*'},
                {size:'580*90',style:'',dot:'*'},
                {size:'500*200',style:'',dot:'*'},
                {size:'480*160',style:'',dot:'*'},
                {size:'468*60',style:'',dot:'*'},
                {size:'468*15',style:'',dot:'*'},
                {size:'460*60',style:'',dot:'*'},
                {size:'234*60',style:'',dot:'*'},
            ],
            "111": [{size:'160*600',style:'',dot:'*'},{size:'120*600',style:'',dot:'*'},{size:'120*240',style:'',dot:'*'}],
            "112": [
                {size:'360*300',style:'',dot:'*'},
                {size:'336*280',style:'',dot:'*'},
                 {size:'300*250',style:'',dot:'*'},
                  {size:'300*100',style:'',dot:'*'},
                 {size:'300*50',style:'',dot:'*'},  
                 {size:'264*160',style:'',dot:'*'}, 
            ],
            "diy": [],
            "mdiy": [],
            "210": [{size:'6:5',style:'',dot:':'},
                    {size:'20:3',style:'',dot:':'},
                    {size:'20:5',style:'',dot:':'},
                    {size:'20:2',style:'',dot:':'}
            ],
            "220": [ 
                    {size:'20:3',style:'',dot:':'},                
                    {size:'20:2',style:'',dot:':'}
            ],
            "310": [{size:'6:5',style:'',dot:':'},
                    {size:'20:3',style:'',dot:':'},
                    {size:'20:5',style:'',dot:':'},
                    {size:'20:2',style:'',dot:':'}
            ],
            "320": [ 
                    {size:'1:1',style:'',dot:':'},                
                    {size:'2:1',style:'',dot:':'}
            ],
            "340": [ 
                    {size:'1:1',style:'',dot:':'},                
                    {size:'2:1',style:'',dot:':'}
            ],
        },
        placeName:{
          /**
           * 11 关联 tab选中， tabkey 关联place 的尺寸数组
           */
            "11": [
                    {tabname: "横幅", tabkey: '110', className: "normal"},
                    {tabname: "竖幅", tabkey: '111',className: "normal" },
                    {tabname: "矩形", tabkey: '112',className: "normal"},
                    {tabname: "自定义", tabkey: 'diy',className: "normal"}
                ],
             "12":[],
             "21": [
                    {tabname: "固定比例1", tabkey: '210', className: "normal"},                  
                    {tabname: "自定义", tabkey: 'mdiy',className: "normal"}
                ],
            "22": [
                    {tabname: "固定比例2", tabkey: '220', className: "normal"},                  
                    {tabname: "自定义", tabkey: 'mdiy',className: "normal"}
                ],
            "31": [
                    {tabname: "固定比例3", tabkey: '310', className: "normal"},                  
                    {tabname: "自定义", tabkey: 'mdiy',className: "normal"}
                ],
            "32": [
                    {tabname: "固定比例4", tabkey: '320', className: "normal"},                  
                    {tabname: "自定义", tabkey: 'mdiy',className: "normal"}
            ],  
            "33": [
                    {tabname: "固定比例4", tabkey: '320', className: "normal"},                  
                    {tabname: "自定义", tabkey: 'mdiy',className: "normal"}
                ], 
            "34": [
                    {tabname: "固定比例4", tabkey: '320', className: "normal"},                  
                    {tabname: "自定义", tabkey: 'mdiy',className: "normal"}
                ],                
        }
    }
  } ,
  computed:{
    
      selectTabs: function( ){
          // console.log(this.currtabs)
          this.showdiy = false; //默认不显示 自定义输入框。
          if(this.placeName[ this.currtabs ]){
           
            //当前的placeName 切换
            if(this.placeName[ this.currtabs ].length>0){
              this.placeName[ this.currtabs ][0].className = 'active';     
              this.tabkey =   this.placeName[ this.currtabs ][0].tabkey;     
              return this.placeName[ this.currtabs ];
            }
          }
          this.tabkey = "";
          return [];        
          
      },
      
      placeSize: function( ){
          //取当前的广告位尺寸信息           
          if( this.place[this.tabkey] ){
             return this.place[this.tabkey];
          }        
         return [];
      }
  },
  methods: {
      onClickTab( index ){
            this.tabkey = this.selectTabs[index].tabkey;
             //显示diy输入框
             this.showdiy = false;
             if (this.tabkey == 'diy' ){
                this.showdiy = true;
                this.sizeUnit = 2;
             } 
             if(this.tabkey=='mdiy') {
                this.showdiy = true;
                this.sizeUnit = 1;
             }
            //清空
            if(this.showdiy){
                this.placeWidth = "";
                this.placeHeight = "";
            }
            
            for(var tab in this.selectTabs){
                this.selectTabs[tab].className  = 'normal';
            }
            this.selectTabs[index].className = 'active'; 
           //不给选择自定义输入 的单位
           if(this.currtabs <20){
             this.sizeUnitDisabled = true;
           }else{
             this.sizeUnitDisabled = false;
           }
      },
      onClickSize(index){
            for(var tab in this.placeSize){
                this.placeSize[tab].style  = 'normal';
            }
            this.placeSize[index].style = 'active'; 
            var size =   this.placeSize[index].size;
            var dot = this.placeSize[index].dot;
            var wh = size.split( dot );
            this._triggerEmit({"size": size, "w": wh[0], "h": wh[1], "dot": dot})
      },
      _triggerEmit( params ){
           this.$emit("on-place-size-change",params);
      },
      //自定义输入触发事件
      _triggerChange(){
          var dot = "*";
          if(this.tabkey == 'mdiy'){
            dot = ":";
          }
          if(this.sizeUnit == 1) {
            dot = ":";
          }else if(this.sizeUnit == 2) {
             dot = "*";
          }
         this._triggerEmit({
            "w": this.placeWidth, 
            "h": this.placeHeight,  
            "dot": dot,
            "size": this.placeWidth+ dot +this.placeHeight
          })
      },
      //自定义输入
      wInputChange( num ){
        
        this.placeWidth = num;
        this._triggerChange();
      },
      hInputChange( num ){
        this.placeHeight = num;
        this._triggerChange();
      }
  }
 
}
</script>
